import React, { useState } from 'react';
import { Palette, Check, ChevronDown } from 'lucide-react';
import { useTheme } from '../context/ThemeContext';

const ThemeSelector = () => {
  const { currentTheme, changeTheme, themes } = useTheme();
  const [isOpen, setIsOpen] = useState(false);

  const handleThemeChange = (themeName) => {
    changeTheme(themeName);
    setIsOpen(false);
  };

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center space-x-2 px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 hover:scale-105"
        aria-label="选择主题"
      >
        <Palette className="h-5 w-5 icon-spin" />
        <span className="hidden sm:inline text-sm font-medium">
          {themes[currentTheme].name}
        </span>
        <ChevronDown className={`h-4 w-4 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} />
      </button>

      {isOpen && (
        <>
          {/* 遮罩层 */}
          <div 
            className="fixed inset-0 z-40"
            onClick={() => setIsOpen(false)}
          />
          
          {/* 主题选择面板 */}
          <div className="absolute right-0 top-full mt-2 w-72 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 z-50 overflow-hidden animate-scale-in">
            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
              <h3 className="text-sm font-semibold text-gray-900 dark:text-white flex items-center">
                <Palette className="h-4 w-4 mr-2" />
                选择主题配色
              </h3>
              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                选择你喜欢的配色方案
              </p>
            </div>
            
            <div className="p-2 max-h-80 overflow-y-auto">
              {Object.entries(themes).map(([key, theme]) => (
                <button
                  key={key}
                  onClick={() => handleThemeChange(key)}
                  className={`w-full flex items-center justify-between p-3 rounded-lg transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:scale-105 ${
                    currentTheme === key 
                      ? 'bg-gray-50 dark:bg-gray-700 ring-2 ring-opacity-50 animate-glow' 
                      : ''
                  }`}
                  style={{
                    ringColor: currentTheme === key ? theme.colors.primary : 'transparent'
                  }}
                >
                  <div className="flex items-center space-x-3">
                    {/* 主题色彩预览 */}
                    <div className="flex space-x-1">
                      <div 
                        className="w-4 h-4 rounded-full border border-gray-200 dark:border-gray-600 hover:scale-110 transition-transform duration-300 animate-pulse"
                        style={{ backgroundColor: theme.colors.primary }}
                      />
                      <div 
                        className="w-4 h-4 rounded-full border border-gray-200 dark:border-gray-600 hover:scale-110 transition-transform duration-300 animate-pulse"
                        style={{ 
                          backgroundColor: theme.colors.primaryHover,
                          animationDelay: '0.1s'
                        }}
                      />
                      <div 
                        className="w-4 h-4 rounded-full border border-gray-200 dark:border-gray-600 hover:scale-110 transition-transform duration-300 animate-pulse"
                        style={{ 
                          backgroundColor: theme.colors.primaryLight,
                          animationDelay: '0.2s'
                        }}
                      />
                    </div>
                    
                    <div className="text-left">
                      <div className="text-sm font-medium text-gray-900 dark:text-white">
                        {theme.name}
                      </div>
                      <div className="text-xs text-gray-500 dark:text-gray-400">
                        {theme.description}
                      </div>
                    </div>
                  </div>
                  
                  {currentTheme === key && (
                    <Check 
                      className="h-4 w-4 flex-shrink-0"
                      style={{ color: theme.colors.primary }}
                    />
                  )}
                </button>
              ))}
            </div>
            
            <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
              <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
                主题设置会自动保存
              </p>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default ThemeSelector;
